<template>
  <div class="app-container">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <h2 class="page-title">标的管理列表</h2>
      <p class="page-desc">展示所有标的信息，可进行查看和放款操作</p>
    </div>

    <!-- 列表区域 -->
    <el-card class="table-card" shadow="hover">
      <div class="table-header">
        <span class="table-count">共 <strong>{{ list ? list.length : 0 }}</strong> 条记录</span>
      </div>

      <el-table
        :data="list"
        stripe
        border
        v-loading="loading"
        element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        :header-cell-style="headerCellStyle"
        :cell-style="cellStyle"
        @row-hover="handleRowHover"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="lendNo" label="标的编号" width="160" />
        <el-table-column prop="amount" label="标的金额">
          <template slot-scope="scope">
            <span class="amount">{{ scope.row.amount | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="period" label="投资期数" />
        <el-table-column label="年化利率">
          <template slot-scope="scope">
            <span class="rate">{{ (scope.row.lendYearRate * 100).toFixed(2) }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="investAmount" label="已投金额">
          <template slot-scope="scope">
            <span>{{ scope.row.investAmount | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="investNum" label="投资人数" />
        <el-table-column prop="publishDate" label="发布时间" width="150" />
        <el-table-column prop="lendStartDate" label="开始日期" />
        <el-table-column prop="lendEndDate" label="结束日期" />
        <el-table-column prop="param.returnMethod" label="还款方式" />
        <el-table-column prop="param.status" label="状态">
          <template slot-scope="scope">
            <el-tag
              :type="statusMap[scope.row.status].type"
              effect="light"
            >
              {{ statusMap[scope.row.status].label }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              class="btn-view"
              icon="el-icon-view"
            >
              <router-link :to="'/core/lend/detail/' + scope.row.id" class="link-view">
                查看
              </router-link>
            </el-button>

            <el-button
              v-if="scope.row.status == 1"
              type="warning"
              size="mini"
              @click="makeLoan(scope.row.id)"
              class="btn-loan"
              icon="el-icon-circle-check"
            >
              放款
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 无数据提示 -->
      <div v-if="!loading && list && list.length === 0" class="empty-state">
        <el-empty description="暂无标的数据"></el-empty>
      </div>
    </el-card>
  </div>
</template>

<script>
import lendApi from '@/api/core/lend'

export default {
  data() {
    return {
      list: null, // 列表数据
      loading: false, // 加载状态
      filter: {
        lendNo: '',
        status: '',
        dateRange: []
      },
      // 状态映射表
      statusMap: {
        1: { label: '未放款', type: 'info' },
        2: { label: '已放款', type: 'success' },
        3: { label: '已结束', type: 'warning' }
      }
    }
  },

  created() {
    this.fetchData()
  },

  filters: {
    // 金额格式化过滤器
    formatMoney(value) {
      if (!value) return '0.00'
      return Number(value).toFixed(2)
    }
  },

  methods: {
    // 加载列表数据
    fetchData() {
      this.loading = true
      // 可以根据实际接口需求传递筛选参数
      const params = {
        lendNo: this.filter.lendNo,
        status: this.filter.status,
        startDate: this.filter.dateRange[0] || '',
        endDate: this.filter.dateRange[1] || ''
      }

      lendApi.getList(params).then(response => {
        this.list = response.data.list
        this.loading = false
      }).catch(() => {
        this.loading = false
        this.$message.error('加载数据失败，请重试')
      })
    },

    // 重置筛选条件
    resetFilter() {
      this.filter = {
        lendNo: '',
        status: '',
        dateRange: []
      }
      this.fetchData()
    },

    // 放款操作
    makeLoan(id) {
      this.$confirm('确定要对该标的进行放款操作吗？', '放款确认', {
        confirmButtonText: '确认放款',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.loading = true
          return lendApi.makeLoan(id)
        })
        .then(response => {
          this.$message({
            type: 'success',
            message: response.message,
            duration: 1500
          })
          this.fetchData() // 重新获取数据
        })
        .catch(error => {
          this.loading = false
          if (error === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消放款'
            })
          } else {
            this.$message.error('放款失败：' + (error.message || '网络错误'))
          }
        })
    },

    // 处理行 hover 事件
    handleRowHover(row, column, cell, event) {
      // 可以添加行 hover 时的自定义逻辑
    }
  }
}
</script>

<style scoped>
/* 页面整体样式 */
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);
}

/* 页面标题样式 */
.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 20px;
  color: #1f2d3d;
  margin-bottom: 8px;
  font-weight: 500;
}

.page-desc {
  font-size: 14px;
  color: #8392a5;
  margin: 0;
}

/* 筛选卡片样式 */
.filter-card {
  margin-bottom: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 表格卡片样式 */
.table-card {
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

/* 表格头部样式 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f2f3f5;
}

.table-count {
  color: #4e5969;
  font-size: 14px;
}

.table-count strong {
  color: #1890ff;
  margin: 0 4px;
}

/* 按钮样式 */
.btn-view {
  margin-right: 8px;
  transition: all 0.3s;
}

.btn-view:hover {
  background-color: #096dd9;
}

.btn-loan {
  transition: all 0.3s;
}

.btn-loan:hover {
  background-color: #faad14;
}

/* 链接样式 */
.link-view {
  color: #fff;
  text-decoration: none;
}

.link-view:hover {
  text-decoration: none;
  color: #f0f2f5;
}

/* 特殊列样式 */
.rate {
  color: #f56c6c;
  font-weight: 500;
}

.amount {
  color: #21b573;
}

/* 空状态样式 */
.empty-state {
  padding: 40px 0;
  text-align: center;
}

/* 表格样式优化 */
::v-deep .el-table {
  border-radius: 6px 6px 0 0;
}

::v-deep .el-table th {
  background-color: #f7f8fa;
  font-weight: 500;
  color: #4e5969;
}

::v-deep .el-table tr:hover > td {
  background-color: #f0f7ff !important;
}

/* 加载样式优化 */
::v-deep .el-loading-spinner {
  top: 50%;
  transform: translateY(-50%);
}

/* 操作按钮组样式 */
::v-deep .el-table__column--selection {
  width: 50px !important;
}
</style>
